<html>  
<head>  
    <meta charset="utf-8">  
    <style type="text/css">  
        body {  
            margin: 0;  
        }  
        #main {  
            height: 100%;  
        }  
    </style>  
</head>  
<body>  
<div id="main"></div>  
<script src="/static/js/echarts.js"></script>  
<script src="/static/js/bmap1.js"></script>  
<script src="/static/js/china.js"></script>  
<script src="/static/js/world.js"></script>  
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>  
<script>  
var myChart = echarts.init(document.getElementById('main'));  
  // var uploadedDataURL = "/static/js/guangdong.json";
// var uploadedDataURL = "/static/js/china.json";
    // $.get(uploadedDataURL, function (geoJson) {

    // myChart.hideLoading();

    // echarts.registerMap('广东省', geoJson);
    // echarts.registerMap('全国', geoJson);

var geoCoordMap = {  
    '上海': [121.4648,31.2891],  
    '东莞': [113.8953,22.901],  
    '东营': [118.7073,37.5513],  
    '中山': [113.4229,22.478],  
    '临汾': [111.4783,36.1615],  
    '临沂': [118.3118,35.2936],  
    '丹东': [124.541,40.4242],  
    '丽水': [119.5642,28.1854],  
    '乌鲁木齐': [87.9236,43.5883],  
    '佛山': [112.8955,23.1097],  
    '保定': [115.0488,39.0948],  
    '兰州': [103.5901,36.3043],  
    '包头': [110.3467,41.4899],  
    '北京': [116.4551,40.2539],  
    '北海': [109.314,21.6211],  
    '南京': [118.8062,31.9208],  
    '南宁': [108.479,23.1152],  
    '南昌': [116.0046,28.6633],  
    '南通': [121.1023,32.1625],  
    '厦门': [118.1689,24.6478],  
    '台州': [121.1353,28.6688],  
    '合肥': [117.29,32.0581],  
    '呼和浩特': [111.4124,40.4901],  
    '咸阳': [108.4131,34.8706],  
    '哈尔滨': [127.9688,45.368],  
    '唐山': [118.4766,39.6826],  
    '嘉兴': [120.9155,30.6354],  
    '大同': [113.7854,39.8035],  
    '大连': [122.2229,39.4409],  
    '天津': [117.4219,39.4189],  
    '太原': [112.3352,37.9413],  
    '威海': [121.9482,37.1393],  
    '宁波': [121.5967,29.6466],  
    '宝鸡': [107.1826,34.3433],  
    '宿迁': [118.5535,33.7775],  
    '常州': [119.4543,31.5582],  
    '广州': [113.5107,23.2196],  
    '廊坊': [116.521,39.0509],  
    '延安': [109.1052,36.4252],  
    '张家口': [115.1477,40.8527],  
    '徐州': [117.5208,34.3268],  
    '德州': [116.6858,37.2107],  
    '惠州': [114.6204,23.1647],  
    '成都': [103.9526,30.7617],  
    '扬州': [119.4653,32.8162],  
    '承德': [117.5757,41.4075],  
    '拉萨': [91.1865,30.1465],  
    '无锡': [120.3442,31.5527],  
    '日照': [119.2786,35.5023],  
    '昆明': [102.9199,25.4663],  
    '杭州': [119.5313,29.8773],  
    '枣庄': [117.323,34.8926],  
    '柳州': [109.3799,24.9774],  
    '株洲': [113.5327,27.0319],  
    '武汉': [114.3896,30.6628],  
    '汕头': [117.1692,23.3405],  
    '江门': [112.6318,22.1484],  
    '沈阳': [123.1238,42.1216],  
    '沧州': [116.8286,38.2104],  
    '河源': [114.917,23.9722],  
    '泉州': [118.3228,25.1147],  
    '泰安': [117.0264,36.0516],  
    '泰州': [120.0586,32.5525],  
    '济南': [117.1582,36.8701],  
    '济宁': [116.8286,35.3375],  
    '海口': [110.3893,19.8516],  
    '淄博': [118.0371,36.6064],  
    '淮安': [118.927,33.4039],  
    '深圳': [114.5435,22.5439],  
    '清远': [112.9175,24.3292],  
    '温州': [120.498,27.8119],  
    '渭南': [109.7864,35.0299],  
    '湖州': [119.8608,30.7782],  
    '湘潭': [112.5439,27.7075],  
    '滨州': [117.8174,37.4963],  
    '潍坊': [119.0918,36.524],  
    '烟台': [120.7397,37.5128],  
    '玉溪': [101.9312,23.8898],  
    '珠海': [113.7305,22.1155],  
    '盐城': [120.2234,33.5577],  
    '盘锦': [121.9482,41.0449],  
    '石家庄': [114.4995,38.1006],  
    '福州': [119.4543,25.9222],  
    '秦皇岛': [119.2126,40.0232],  
    '绍兴': [120.564,29.7565],  
    '聊城': [115.9167,36.4032],  
    '肇庆': [112.1265,23.5822],  
    '舟山': [122.2559,30.2234],  
    '苏州': [120.6519,31.3989],  
    '莱芜': [117.6526,36.2714],  
    '菏泽': [115.6201,35.2057],  
    '营口': [122.4316,40.4297],  
    '葫芦岛': [120.1575,40.578],  
    '衡水': [115.8838,37.7161],  
    '衢州': [118.6853,28.8666],  
    '西宁': [101.4038,36.8207],  
    '西安': [109.1162,34.2004],  
    '贵阳': [106.6992,26.7682],  
    '连云港': [119.1248,34.552],  
    '邢台': [114.8071,37.2821],  
    '邯郸': [114.4775,36.535],  
    '郑州': [113.4668,34.6234],  
    '鄂尔多斯': [108.9734,39.2487],  
    '重庆': [107.7539,30.1904],  
    '金华': [120.0037,29.1028],  
    '铜川': [109.0393,35.1947],  
    '银川': [106.3586,38.1775],  
    '镇江': [119.4763,31.9702],  
    '长春': [125.8154,44.2584],  
    '长沙': [113.0823,28.2568],  
    '长治': [112.8625,36.4746],  
    '阳泉': [113.4778,38.0951],  
    '青岛': [120.4651,36.3373],  
    '韶关': [113.7964,24.7028],
    "越秀": [113.27, 23.13],
            "荔湾": [113.23, 23.13],
            "广州市": [113.27, 23.13],
            "海珠": [113.25, 23.1],
            "天河": [113.35, 23.12],
            "白云": [113.27, 23.17],
            "黄埔": [113.45, 23.1],
            "番禺": [113.35, 22.95],
            "花都": [113.22, 23.4],
            "增城": [113.83, 23.3],
            "从化": [113.58, 23.55],
            "韶关市": [113.6, 24.82],
            "武江": [113.57, 24.8],
            "浈江": [113.6, 24.8],
            "曲江": [113.6, 24.68],
            "始兴": [114.07, 24.95],
            "仁化": [113.75, 25.08],
            "翁源": [114.13, 24.35],
            "新丰": [114.2, 24.07],
            "乐昌": [113.35, 25.13],
            "南雄": [114.3, 25.12],
            "深圳市": [114.05, 22.55],
            "罗湖": [114.12, 22.55],
            "福田": [114.05, 22.53],
            "南山": [113.92, 22.52],
            "宝安": [113.9, 22.57],
            "龙岗": [114.27, 22.73],
            "盐田": [114.22, 22.55],
            "珠海市": [113.57, 22.27],
            "香洲": [113.55, 22.27],
            "斗门": [113.28, 22.22],
            "金湾": [113.4, 22.07],
            "汕头市": [116.68, 23.35],
            "龙湖": [116.72, 23.37],
            "金平": [116.7, 23.37],
            "潮阳": [116.6, 23.27],
            "潮南": [116.43, 23.25],
            "澄海": [116.77, 23.48],
            "南澳": [117.02, 23.42],
            "佛山市": [113.12, 23.02],
            "南海": [113.15, 23.03],
            "顺德市": [113.3, 22.8],
            "三水": [112.87, 23.17],
            "高明": [112.88, 22.9],
            "江门市": [113.08, 22.58],
            "新会": [113.03, 22.47],
            "台山": [112.78, 22.25],
            "开平": [112.67, 22.38],
            "鹤山": [112.97, 22.77],
            "恩平": [112.3, 22.18],
            "湛江市": [110.35, 21.27],
            "赤坎": [110.37, 21.27],
            "霞山": [110.4, 21.2],
            "坡头": [110.47, 21.23],
            "麻章": [110.32, 21.27],
            "遂溪": [110.25, 21.38],
            "徐闻": [110.17, 20.33],
            "廉江": [110.27, 21.62],
            "雷州": [110.08, 20.92],
            "吴川": [110.77, 21.43],
            "茂名市": [110.92, 21.67],
            "茂南": [110.92, 21.63],
            "茂港": [111.02, 21.47],
            "电白": [111, 21.5],
            "高州": [110.85, 21.92],
            "化州": [110.63, 21.67],
            "信宜": [110.95, 22.35],
            "肇庆市": [112.47, 23.05],
            "端州": [112.48, 23.05],
            "鼎湖": [112.57, 23.17],
            "广宁": [112.43, 23.63],
            "怀集": [112.18, 23.92],
            "封开": [111.5, 23.43],
            "德庆": [111.77, 23.15],
            "高要": [112.45, 23.03],
            "四会": [112.68, 23.33],
            "惠州市": [114.42, 23.12],
            "惠城": [114.4, 23.08],
            "惠阳": [114.47, 22.8],
            "博罗": [114.28, 23.18],
            "惠东": [114.72, 22.98],
            "龙门": [114.25, 23.73],
            "梅州市": [116.12, 24.28],
            "梅江": [116.12, 24.32],
            "梅县": [116.05, 24.28],
            "大埔": [116.7, 24.35],
            "丰顺": [116.18, 23.77],
            "五华": [115.77, 23.93],
            "平远": [115.88, 24.57],
            "蕉岭": [116.17, 24.67],
            "兴宁": [115.73, 24.15],
            "汕尾市": [115.37, 22.78],
            "海丰": [115.33, 22.97],
            "陆河": [115.65, 23.3],
            "陆丰": [115.65, 22.95],
            "河源市": [114.7, 23.73],
            "源城": [114.7, 23.73],
            "紫金": [115.18, 23.63],
            "龙川": [115.25, 24.1],
            "连平": [114.48, 24.37],
            "和平": [114.93, 24.45],
            "东源": [114.77, 23.82],
            "阳江市": [111.98, 21.87],
            "江城": [111.95, 21.87],
            "阳西": [111.62, 21.75],
            "阳东": [112.02, 21.88],
            "阳春": [111.78, 22.18],
            "清远市": [113.03, 23.7],
            "清城": [113.02, 23.7],
            "佛冈": [113.53, 23.88],
            "阳山": [112.63, 24.48],
            "清新": [112.98, 23.73],
            "英德": [113.4, 24.18],
            "连州": [112.38, 24.78],
            "东莞市": [113.75, 23.05],
            "中山市": [113.38, 22.52],
            "潮州市": [116.62, 23.67],
            "湘桥": [116.63, 23.68],
            "潮安": [116.68, 23.45],
            "饶平": [117, 23.67],
            "揭阳市": [116.37, 23.55],
            "揭东": [116.42, 23.57],
            "揭西": [115.83, 23.43],
            "惠来": [116.28, 23.03],
            "普宁": [116.18, 23.3],
            "云浮市": [112.03, 22.92],
            "云城": [112.03, 22.93],
            "新兴": [112.23, 22.7],
            "郁南": [111.53, 23.23],
            "云安": [112, 23.08],
            "罗定": [111.57, 22.77],
            "鲤鱼洲": [113.064, 22.8],
            "高新沙": [113.413, 22.837],
            "沙溪": [113.677, 22.876],
            "罗田": [113.878, 22.841],
            "松木山": [113.878, 22.887],
            "公明": [113.965, 22.781],  
};  
  
var BJData = [  
    [{name:'北京'}, {name:'上海',value:95}],  
    [{name:'北京'}, {name:'广州',value:90}],  
    [{name:'北京'}, {name:'大连',value:80}],  
    [{name:'北京'}, {name:'南宁',value:70}],  
    [{name:'北京'}, {name:'南昌',value:60}],  
    [{name:'北京'}, {name:'拉萨',value:50}],  
    [{name:'北京'}, {name:'长春',value:40}],  
    [{name:'北京'}, {name:'包头',value:30}],  
    [{name:'北京'}, {name:'重庆',value:20}],  
    [{name:'北京'}, {name:'常州',value:10}]  
];  
  
var SHData = [  
    [{name:'上海'},{name:'包头',value:95}],  
    [{name:'上海'},{name:'昆明',value:90}],  
    [{name:'上海'},{name:'广州',value:80}],  
    [{name:'上海'},{name:'郑州',value:70}],  
    [{name:'上海'},{name:'长春',value:60}],  
    [{name:'上海'},{name:'重庆',value:50}],  
    [{name:'上海'},{name:'长沙',value:40}],  
    [{name:'上海'},{name:'北京',value:30}],  
    [{name:'上海'},{name:'丹东',value:20}],  
    [{name:'上海'},{name:'大连',value:10}]  
];  
  
var GZData = [  
    [{name:'广州'},{name:'福州',value:95}],  
    [{name:'广州'},{name:'太原',value:90}],  
    [{name:'广州'},{name:'长春',value:80}],  
    [{name:'广州'},{name:'重庆',value:70}],  
    [{name:'广州'},{name:'西安',value:60}],  
    [{name:'广州'},{name:'成都',value:50}],  
    [{name:'广州'},{name:'常州',value:40}],  
    [{name:'广州'},{name:'北京',value:30}],  
    [{name:'广州'},{name:'北海',value:20}],  
    [{name:'广州'},{name:'海口',value:10}]  
];  
 
var GDData = [  
    [{name:'鲤鱼洲'},{name:'高新沙',value:95}],  
    [{name:'高新沙'},{name:'沙溪',value:90}],  
    [{name:'沙溪'},{name:'罗田',value:80}],  
    [{name:'罗田'},{name:'松木山',value:70}],  
    [{name:'罗田'},{name:'公明',value:60}]  
];  
// var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';  
// var planePath = 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891';  
var convertData = function (data) {  
    var res = [];  
    for (var i = 0; i < data.length; i++) {  
        var dataItem = data[i];  
        var fromCoord = geoCoordMap[dataItem[0].name];  
        var toCoord = geoCoordMap[dataItem[1].name];  
        if (fromCoord && toCoord) {  
            res.push({  
                fromName: dataItem[0].name,  
                toName: dataItem[1].name,  
                coords: [fromCoord, toCoord]  
            });  
        }  
    }  
    return res;  
};  
  
var color = ['#a6c84c', '#ffa022', '#46bee9'];  
var series = [
        {
            "name": "1万",
            "type": "effectScatter",
            "coordinateSystem": "bmap",
            "data": [{
                "name": "鲤鱼洲",
                "value": [113.064, 22.8]
            }],
            "rippleEffect": {
                "period": 4,
                "scale": 4,
                "brushType": "fill"
            },
            "label": {
                "normal": {
                    "formatter": "{b}",
                    "position": "right",
                    "show": true
                },
                "emphasis": {
                    "show": true
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#FFFFC3"
                }
            }
        }];  
[['北京', BJData], ['上海', SHData], ['广州', GZData],['广东', GDData]].forEach(function (item, i) {  
    series.push({  
            name: item[0] + ' Top10',  
            type: 'lines',  
            coordinateSystem: 'bmap',  
            zlevel: 1,  
            // effect: {  
            //     show: true,  
            //     period: 6,  
            //     trailLength: 0.7,  
            //     color: '#fff',  
            //     symbolSize: 5, 
            // }, 
            smooth:true,
            effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.8,
                color: '#fff',//'#fff'color[i]
                symbolSize: 8,
                shadowBlur: 10
            },

            lineStyle: {  
                normal: {  
                    color: '#921aff',//color[i],  
                    width: 4,  
                    curveness: 0.2,
                    opacity: 0.5,  
                }  
            },  
            data: convertData(item[1])  
        },  
        // {  
        //     name: item[0] + ' Top10',  
        //     type: 'lines',  
        //     coordinateSystem: 'bmap',  
        //     zlevel: 2,  
            // effect: {  
            //     show: true,  
            //     period: 6,  
            //     trailLength: 0,  
            //     // symbol: planePath,  
            //     symbolSize: 15  
            // }, 
            // effect: {
            //     constantSpeed: 20,
            //     show: true,
            //     trailLength: 0.1,
            //     symbolSize: 5
            // },

            // lineStyle: {  
            //     normal: {  
            //         color: color[i],  
            //         width: 1,  
            //         opacity: 0.4,  
            //         curveness: 0.2  
            //     }  
            // },  
        //     data: convertData(item[1])  
        // },  
        {  
            name: item[0] + ' Top10',  
            type: 'effectScatter',  
            coordinateSystem: 'bmap',  
            zlevel: 2,  
            rippleEffect: {  
                // brushType: 'stroke'
                "period": 4,
                "scale": 6,
                "brushType": "fill"  
            },  
            label: {  
                normal: {  
                    show: true,  
                    position: 'right',  
                    formatter: '{b}'  
                }  
            },  
            symbolSize: function (val) {  
                return val[2] / 8;  
            },  
            itemStyle: {  
                normal: {  
                    color: color[i]  
                }  
            },  
            data: item[1].map(function (dataItem) {  
                return {  
                    name: dataItem[1].name,  
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])  
                };  
            })  
        });  
});  
  
option = {  
    backgroundColor: '#404a59',  
    title : {  
        text: '模拟迁徙',  
        subtext: '数据纯属虚构',  
        left: 'center',  
        textStyle : {  
            color: '#fff'  
        }  
    },  
    tooltip : {  
        trigger: 'item'  
    },  
    legend: {  
        orient: 'vertical',  
        top: 'bottom',  
        left: 'right',  
        data:['北京 Top10', '上海 Top10', '广州 Top10','广东 Top10'],  
        textStyle: {  
            color: '#fff'  
        },  
        selectedMode: 'single'  
    },  
    dataRange: {  
        min: 0,  
        max: 100,  
        x: 'right',  
        calculable: true,  
        color: ['#ff3333', 'orange', 'lime', 'aqua'],  
        textStyle: {  
            color: '#fff'  
        }  
    },  
    bmap: {  
        center: [113.525, 22.82],  
        zoom: 11,  
        roam: true  
    },  
    series: series  
};  
  
myChart.setOption(option);  
</script>  
</body>  
</html>